<template>
  <div>
    地形： <a-switch v-model:checked="checked" @change="handleChange" />
  </div>
  <a-button @click="handelStartDraw('PointHeight')">开始测量高程</a-button>
  <a-button @click="handelEndDraw('PointHeight')">结束测量高程</a-button>
  <a-button @click="handelRemoveDraw('PointHeight')">清除测量高程</a-button>
  <a-button @click="handelGetDraw('PointHeight')">获取高程entity</a-button>

  <a-button @click="handelStartDraw('Point')">开始绘制点</a-button>
  <a-button @click="handelEndDraw('Point')">结束绘制点</a-button>
  <a-button @click="handelRemoveDraw('Point')">清除绘制点</a-button>
  <a-button @click="handelGetDraw('Point')">获取点entity</a-button>

  <a-button @click="handelStartDraw('Polyline')">开始绘制折线</a-button>
  <a-button @click="handelEndDraw('Polyline')">结束绘制折线</a-button>
  <a-button @click="handelRemoveDraw('Polyline')">清除绘制折线</a-button>
  <a-button @click="handelGetDraw('Polyline')">获取折线entity</a-button>

  <a-button @click="handelStartDraw('Polygon')">开始绘制多边形</a-button>
  <a-button @click="handelEndDraw('Polygon')">结束绘制多边形</a-button>
  <a-button @click="handelRemoveDraw('Polygon')">清除绘制多边形</a-button>
  <a-button @click="handelGetDraw('Polygon')">获取多边形entity</a-button>

  <a-button @click="handleDraw()">promise开始绘制矩形</a-button>
  <a-button @click="handelStartDraw('Rectangle')">开始绘制矩形</a-button>
  <a-button @click="handelEndDraw('Rectangle')">结束绘制矩形</a-button>
  <a-button @click="handelRemoveDraw('Rectangle')">清除绘制矩形</a-button>
  <a-button @click="handelGetDraw('Rectangle')">获取矩形entity</a-button>

  <a-button @click="handelStartDraw('Circle')">开始绘制圆形</a-button>
  <a-button @click="handelEndDraw('Circle')">结束绘制圆形</a-button>
  <a-button @click="handelRemoveDraw('Circle')">清除绘制圆形</a-button>
  <a-button @click="handelGetDraw('Circle')">获取圆entity</a-button>
  <div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
import CesiumTool from '@/utils/newCesiumTool/CesiumTool.js'
import { reactive } from "vue";

const checked = ref(false)
const cesiumObj = {
  viewer: null,
  cesiumDraw: null
}

let terrainProvider
onMounted(async () => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    animation: false, // 左下角的动画控制器组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });
  cesiumObj.viewer = viewer
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";
  // 资产地形
   terrainProvider = await Cesium.CesiumTerrainProvider.fromIonAssetId(1);
   console.log('terrainProvider',terrainProvider)
  // viewer.terrainProvider = terrainProvider; // 使用地形
  // 封装绘制库
  cesiumObj.cesiumDraw = new CesiumTool.CesiumDraw(viewer)
  console.log('CesiumTool', cesiumObj.cesiumDraw)
});

function handelStartDraw(type) {
  cesiumObj.cesiumDraw.startDraw(type);
}
function handelEndDraw(type) {
  cesiumObj.cesiumDraw.stopDraw(type);
}
function handelRemoveDraw(type) {
  cesiumObj.cesiumDraw.removeDraw(type);
}
function handelGetDraw(type) {
  const entities = cesiumObj.cesiumDraw.getDraw(type);
  console.log("获取所有实体", {
    type,
    entities,
  });
}

function handleDraw() {
  cesiumObj.cesiumDraw.drawPromise('Rectangle', false).then(res => {
    console.log('绘制完成', res)
  })
}

//
function handleChange(flag) {
  if (flag) {
    cesiumObj.viewer.terrainProvider = terrainProvider; // 使用地形
  } else {
    cesiumObj.viewer.terrainProvider = null; // 使用地形
  }
  console.log(flag)
}


</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
